<template>
    <a-row>
      <a-col :span="8">
        <a-form-item label="省份:">
          <a-select
              :default-value="province"
              placeholder="请选择省"
              :options="provinces"
              @change="handleChange"
          >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="市区:">
          <a-select
              :default-value="city"
              placeholder="请选择市"
              :options="cities"
              @change="handleChange2"
          >
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="区县:">
          <a-select
              :default-value="area"
              placeholder="请选择区县"
              :options="areas"
              @change="handleChange3"
          >
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
</template>

<script>
import {reactive, toRefs, onMounted, watch} from "vue";
import pcaa from 'china-area-data';

export default {
  name: 'RegionSelect',
  props: {
    value: {
      type: String,
      default: '重庆市-重庆市-潼南区'
    }
  },
  setup(props, {emit}) {
    [provinceName, cityName, areaName] = props.value.split('-')
    const state = reactive({
      provinces: [],
      cities: [],
      areas: [],
      provinceCode: '',//选中省的代码
      cityCode: '',//选中省的代码
      provinceName: provinceName || '',//选中的市的名字
      cityName: cityName || '',//选中的市的名字
      areaCode: '',
      areaName: areaName || ''
    })
    onMounted(() => {
      state.provinces = getProvince();
    })

    watch(state, (newValue) => {
      emit("update:value", `${newValue.provinceName}-${newValue.cityName}-${newValue.areaName}`);
      emit('handleChange',state);
    })

    // 获取省份
    const getProvince = () => {
      let arr = []
      const province = pcaa['86']
      Object.keys(province).map(key => {
        arr.push({
          value: key,
          label: province[key],
        });
      })
      return arr
    }
    // 获取城市
    const getCity = (province) => {
      let arr = []
      const city = pcaa[province]
      Object.keys(city).map(key => {
        arr.push({
          value: key,
          label: city[key],
        });
      })
      return arr
    }
    // 获取区县
    const getArea = (city) => {
      let arr = []
      const area = pcaa[city]
      Object.keys(area).map(key => {
        arr.push({
          value: key,
          label: area[key],
        });
      })
      return arr
    }
    // 根据选择的省，更新市的下拉选项
    const handleChange = (value) => {
      state.cities = getCity(value);
      state.provinceCode = value;
      // 根据code获取name
      let index = state.provinces.findIndex(item => item.value == value);
      state.provinceName = state.provinces[index].label;

    }
    // 选择市
    const handleChange2 = (value) => {
      // 将省市拼接放在籍贯字段里
      state.cityCode = value;
      state.areas = getArea(value)
      let index = state.cities.findIndex(item => item.value == value);
      state.cityName = state.cities[index].label;
      // 将省市和拼接后的籍贯作为对象传给父组件
      // let data = {
      //  province: state.provinceCode,
      // city: state.cityCode,
      //  }
    }
    // 选择市
    const handleChange3 = (value) => {
      // 将省市拼接放在籍贯字段里
      state.areaCode = value;
      let index = state.areas.findIndex(item => item.value == value);
      state.areaName = state.areas[index].label;
      // 将省市和拼接后的籍贯作为对象传给父组件
      // let data = {
      //  province: state.provinceCode,
      // city: state.cityCode,
      // }
    }
    return {
      ...toRefs(state),
      getProvince,
      getCity,
      getArea,
      handleChange,
      handleChange2,
      handleChange3
    }
  }

}
</script>

<style scoped lang="less">

</style>
